<template>
  <div class='container'>
    <el-dialog :title="title" :visible="showDialog" width="400px" @close="btnCancel">
        <el-form ref="tagsForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="所属学科" prop="subjectID" v-show="!dirID.id">
        <el-select v-model="form.subjectID" placeholder="请选择">
            <el-option v-for="(item,index) in simpleList" :key="index" :value="item.value" :label="item.label">{{item.label}}</el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="tagName" >
        <el-input v-model="form.tagName" style="width:218px" placeholder="请选择目录名称" />
      </el-form-item>
    </el-form>
        <div slot="footer" class="dialog-footer">
           <el-row type="flex" justify="end">
                <el-button @click="btnCancel" size="small">取 消</el-button>
                <el-button type="primary" size="small" @click="btnOk ">确 定</el-button>
           </el-row>
        </div>
</el-dialog>
  </div>
</template>

<script>
import { add, update, detail } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    dirID: {
      type: Object,
      required: true
    },
    params: {
      type: Object,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  async created () {
    this.getSimpleList()
  },
  data () {
    return {
      form: {
        subjectID: null,
        tagName: ''
      },
      rules: {
        tagName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      },
      simpleList: []
    }
  },
  computed: {
    // title () {
    //   return this.form.id ? '编辑标签' : '新增标签'
    // }
  },
  methods: {
    // 学科简单列表
    async getSimpleList () {
      const { data } = await simple()
      this.simpleList = data
    },
    btnCancel () {
      this.$emit('update:showDialog', false)
      this.$refs.tagsForm.clearValidate()
      this.form = {
        subjectID: null,
        tagName: ''
      }
    },
    async btnOk () {
      try {
        // 表单校验
        await this.$refs.tagsForm.validate()
        // 请求接口
        if (this.form.id) {
          // 编辑
          await update(this.form)
        } else {
          // 新增
        //   从学科跳转
          if (this.dirID.id) {
            await add({ ...this.form, subjectID: Number(this.dirID.id) })
          } else {
            // 从标签栏进入
            await add(this.form)
          }
        }
        //   刷新页面
        this.$parent.getList()
        // 关闭弹窗
        await this.$emit('update:showDialog', false)
        // 提示信息
        await this.$message.success(this.form.id ? '编辑成功' : '新增成功')
      } catch (error) {
        console.log(error)
      }
    },
    async getDetail (id) {
      const { data } = await detail(id)
      this.form = data
    }
  }
}
</script>

<style scoped lang='less'></style>
